import React,{useState} from 'react';
import { Layout,  Button, theme,Dropdown,Avatar  } from 'antd';
import type { MenuProps } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
const { Header,  } = Layout;
const TopHeader = (props:any) => {
    const [collapsed,setCollapsed]=useState(false)
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                   超级管理员
                </a>
            ),
        },

        {
            key: '4',
            danger: true,
            label: '退出登录',
        },
    ];
    const setCollapsedHandle=()=>{
        setCollapsed((value)=>!value)
        console.log("props",props)
        props.sendCollapsedData(collapsed)
    }

    return (
        <>
            <Header style={{ padding: 0, background:colorBgContainer }}>
                <Button
                    type="text"
                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    onClick={() => setCollapsedHandle()}
                    style={{
                        fontSize: '16px',
                        width: 64,
                        height: 64,
                    }}
                />
                <div style={{float:"right"}}>
                    <span>欢迎admin</span>
                    <Dropdown menu={{ items }}>
                        {/*<a onClick={(e) => e.preventDefault()}>*/}
                        {/*    <Space>*/}
                        {/*        Hover me*/}
                        {/*        <DownOutlined />*/}
                        {/*    </Space>*/}
                        {/*</a>*/}
                        <Avatar style={{margin:"-5px 5px 0 5px"}} size={34} icon={<UserOutlined />} />
                    </Dropdown>
                </div>
            </Header>
        </>
    );
};

export default TopHeader;